import { Component } from "react";
import {
  Table,
  Divider,
  message,
  Modal,
  Input,
  Select,
  Button,
} from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";

import "./list.css";
const { Search } = Input;
const { Option } = Select;
export default class Blog extends Component {
  componentWillUnmount() {
    this.setState = () => false;
  }
  columns = [
    {
      title: "编号",
      dataIndex: "id",
      key: "id",
      onCell: (record) => {
        return {
          onClick: (event) => {
            this.toEdit(record.id)();
          }, // 点击行
        };
      },
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
      onCell: (record) => {
        return {
          onClick: (event) => {
            this.toEdit(record.id)();
          }, // 点击行
        };
      },
    },
    {
      title: "状态",
      dataIndex: "is_enable",
      key: "is_enable",
      render: (text, row) => {
        return (
          text && text.data && text.data.length && text.data[0] === 1 ? '已开启' : '未开启'
        );
      },
    },
    {
      title: "操作",
      key: "operation",
      fixed: "right",
      width: 150,
      render: (text, row) => (
        <div className="actions" style={{ display: "flex", alignItems: "center" }}>
          <Button type="link" onClick={this.toEdit(row.id)}>
            编辑
          </Button>
          <Divider type="vertical" />
          <Button type="link" onClick={this.delBlog(row.id)}>
            删除
          </Button>
        </div>
      ),
    },
  ];
  state = {
    dataList: [],
    loading: false,
    type: 2,
    key: "",
  };
  componentDidMount() {
    this.getData();
  }
  toEdit = (id) => {
    return (e) => {
      if (e) e.stopPropagation();
      this.props.history.push({
        pathname: "detail",
        state: {
          id,
          type: "edit",
        },
      });
    };
  };
  getData = () => {
    this.setState({ loading: true });
    this.get("/admin/all", {
      type: this.state.type,
      key: this.state.key,
    })
      .then((res) => {
        if (res.code === 200) {
          this.setState({ dataList: res.data, loading: false });
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };

  delBlog = (id) => {
    return (e) => {
      e.stopPropagation();
      Modal.confirm({
        title: "警告",
        icon: <ExclamationCircleOutlined />,
        content: "确认删除？",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          this.get("/admin/blog/del/" + id, "")
            .then((res) => {
              if (res && res.code === 200) {
                this.getData();
                message.success("删除成功");
              }
            })
            .catch((err) => {
              console.error(err);
            });
        },
      });
    };
  };

  enableChange = (id) => {
    return () => {
      console.log("id:" + id + "状态发生改变");
    };
  };

  onSearch = (value) => {
    this.setState({ key: value }, () => {
      this.getData();
    });
  };

  handleChange = (value) => {
    this.setState({ type: value }, () => {
      this.getData();
    });
  };

  render() {
    return (
      <div className="list-container">
        <div className="search-container">
          搜索：
          <Search
            placeholder="请输入标题或编号"
            onSearch={this.onSearch}
            enterButton
            allowClear
            style={{ width: 220 }}
          />
          <span style={{ marginLeft: 16 }}>状态：</span>
          <Select
            defaultValue="2"
            style={{ width: 120 }}
            onChange={this.handleChange}
          >
            <Option value="2">全部</Option>
            <Option value="1">已开启</Option>
            <Option value="0">未开启</Option>
          </Select>
        </div>
        <Table
          loading={this.state.loading}
          rowKey={(record) => record.id}
          dataSource={this.state.dataList}
          columns={this.columns}
        />
      </div>
    );
  }
}
